<template>
  <el-tabs
      class="group-tabs"
      v-model="active"
      type="card"
      :stretch="false"
      tab-position="top"
      @tab-click="tabClick"
  >
    <el-tab-pane class="group-tab-pane" label="子角色" name="subGroup">
      <RoleList :ref="'subGroup'" :ref-table="'refTable'" :from-detail="true"
                :click-current="clickCurrent" :entry="entry"/>
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="角色属性" name="attr">
      <AttributeList
          :ref="'attr'"
          :entry="entry"
      />
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="菜单" name="menus">
      <MenuAssignTree
          :ref="'menus'"
          :comment="'分配给角色的菜单信息'"
          :entry="entry"
      />
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="权限" name="permits">
      <PermitAssignList
          :ref="'permits'"
          :entry="entry"
      >
        <template v-slot:comment>
          <div style="margin: 32px 0 16px 0; color: #252a2f">
            角色还未分配任何权限，请点击下方按钮分配权限。
          </div>
        </template>
      </PermitAssignList>
    </el-tab-pane>
<!--    <el-tab-pane class="group-tab-pane" label="分组列表" name="groups">-->
<!--      <GroupHolderList-->
<!--          :ref="'groups'"-->
<!--          :hold-type="TYPES.GROUP"-->
<!--          :entry="entryPlat"-->
<!--          :comment="'显示直接持有此角色的所有分组信息'"-->
<!--      />-->
<!--    </el-tab-pane>-->
    <el-tab-pane class="group-tab-pane" label="用户列表" name="users">
      <UserHolderList
          :ref="'users'"
          :hold-type="TYPES.USER"
          :entry="entryPlat"
          :comment="'显示直接持有此角色的所有用户信息'"
      />
    </el-tab-pane>
<!--    <el-tab-pane class="group-tab-pane" label="客户列表" name="clients">-->
<!--      <ClientHolderList-->
<!--          :ref="'clients'"-->
<!--          :entry="entry"-->
<!--          :comment="'显示直接持有此角色的所有客户端信息'"-->
<!--      />-->
<!--    </el-tab-pane>-->
  </el-tabs>
</template>

<script setup lang="ts">
import {currentNames, SERVERS, TYPES} from '@/stores/conf'
import RoleList from '@/widget/list/RoleList.vue'
import AttributeList from '@/widget/list/AttributeList.vue'

import UserHolderList from '@/widget/holder/UserHolderList.vue'
import ClientHolderList from '@/widget/holder/ClientHolderList.vue'
import GroupHolderList from '@/widget/holder/GroupHolderList.vue'

import PermitAssignList from '@/widget/assign/PermitAssignList.vue'
import MenuAssignTree from "@/widget/assign/MenuAssignTree.vue";

import '@/styles/tabs.css'
import {useListTabs} from "@/utils/UseListTabs";
import {ref} from "vue";

const entry = ref({
  name: currentNames.ROLE,
  type: TYPES.ROLE,
  server: SERVERS.ASSET
});

const entryPlat = ref({
  name: currentNames.ROLE,
  type: TYPES.ROLE,
  server: SERVERS.PLATFORM
});

const {active, tabClick, handleCurrent, handleSwitch, clearTabs} = useListTabs('subGroup', currentNames.ROLE);

const clickCurrent = () => {
  clearTabs();
}

defineExpose({
  handleCurrent,
  handleSwitch,
})

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

.group-tabs >>> .el-tabs__header {
  padding-left: 16px;
}

</style>
